<template>
   <div class="t-containers ">  
        <div class="t-title">
            <img src="~assets/img/mobile/2_03.png" alt="">
        </div>              
       <div class="t-content ">        
         <div class="item-swiper">
            <div class="swiper-container">
              <div class="swiper-wrapper">
                <div class="swiper-slide">
                   <div class="swiper-img">
                     <p class="item-title">
                       <img src="~assets/img/banner-name.png" alt="">
                     </p>
                     <p class="item-img" :style="{'background':`url(${ require('assets/img/mobile/1_032.png')}) center`,'backgroundSize':'cover'}"></p>                     
                   </div>
                </div>
                <div class="swiper-slide">
                  <div class="swiper-img">
                       <p class="item-title">
                       <img src="~assets/img/banner-name.png" alt="">
                     </p>
                      <p class="item-img" :style="{'background':`url(${ require('assets/img/mobile/1_032.png')}) center`,'backgroundSize':'cover'}"></p>
                   </div>
                  </div>
                <div class="swiper-slide">
                    <div class="swiper-img">
                       <p class="item-title">
                       <img src="~assets/img/banner-name.png" alt="">
                     </p>
                      <p class="item-img" :style="{'background':`url(${ require('assets/img/mobile/1_032.png')}) center`,'backgroundSize':'cover'}"></p>
                   </div>
                </div>
              </div>
            </div>
          </div>     
          <div class="item-cover"></div>    
             
       </div>  
       <div class="t-download">
            <a  class="link-btn link-app" @click="onDownload"></a>
        </div>              
    </div>
</template>

<script>
import store from "src/store/index";
import { sharefacebook, alertDialogCommpent, downloadApp } from "src/api/util";
import Swiper from "swiper/dist/js/swiper.js";
export default {
  data() {
    return {};
  },
  components: {},
  methods: {
    onDownload() {
      downloadApp();
    }
  },
  mounted: function() {
    var vm = this;
    var mySwiper = new Swiper(".swiper-container", {
      autoplay: true,
      speed: 800,
      mode: "horizontal",
      resistance: "100%",
      loop: true,
      mousewheelControl: true,
      grabCursor: true,
      onFirstInit: function() {
        // $(".slide1").addClass("ani-slide");
      },
      onSlideChangeStart: function(swiper) {},
      onSlideChangeEnd: function(swiper) {}
    });
  },
  computed: {
    userinfo() {
      return store.getters.userinfo;
    }
  }
};
</script>
<style lang="less" scope>
@import url("~assets/less/_mixins.less");
@import "~swiper/dist/css/swiper.css";
.t-containers {
  width: 100%;
  background: url("@{img-url}mobile/bg.jpg") bottom right no-repeat;
  background-size: cover;
  .t-title {
    padding: 56rem/40 42rem/40;
    position: absolute;
    img {
      width: 492/40rem;
      height: 224/40rem;
    }
  }
  .t-content {
    position: relative;
    min-height: 100%;
  }
  .item-swiper {
    position: relative;
    // margin-top: 20px;
    width: 100%;
    right: 0;
    padding-top: 4.8rem;
    z-index: 1;
    .swiper-img {
      margin: 20rem/40 20rem/40 0 20rem/40;
      position: relative;
      .item-img {
        height: 25.35rem;
        width: 12.85rem;
        margin-left: 4.3rem;
      }
      .item-title {
        position: absolute;
        bottom: 200rem/40;
        left: 60rem/40;
        width: 194rem/40;
        height: 60rem/40;
      }
    }
    .swiper-slide-active {
      .swiper-img {
        .animation(slide 1s);
      }
    }
  }
  .item-cover {
    position: absolute;
    width: 18rem;
    height: 9rem;
    bottom: 0;
    right: 0;
    z-index: 99;
    background: url("@{img-url}mobile/bottom_cover.png") no-repeat;
    background-size: cover;
  }
  .t-download {
    position: absolute;
    bottom: 1rem;
    width: 100%;
    z-index: 99;
    a.link-btn {
      margin: auto;
      display: block;
      width: 630rem/40;
      height: 80rem/40;
      background: url("@{img-url}mobile/1_15.png") no-repeat;
      background-size: 100%;
    }
  }
}
</style>